<template>
	<view>
		<view class="header-input">
			<input @input="goToSearch" placeholder="输入姓名" placeholderStyle="color:#BBBBBB" type="text" v-model="name"></input>
			<view>
				<image class="search-image" src="../../static/images/search.png"></image>
			</view>
		</view>
		<view class="tit">校友列表</view>
		<view v-if="address !==undefined && address.length > 0">
			<view id="list" class="tr" v-for="(item,index) in address" :key="index">
				<image class="img" :src="item.avatar_url" @error="errorImg(index)" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
				<view class="name">{{item.name}}</view>
				<image class="imga" src="../../static/images/phone.png" style="width: 70rpx;height: 70rpx;"></image>
				<view class="name1" v-if="item.phone===null">暂无</view>
				<view class="name1" v-else>手机：{{item.phone}}</view>
			</view>
		</view>
		<view v-else>
			<view>
				<view class="nothing">通讯录暂无校友，快去找校友吧</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				address: [],
				id: 1,
				size: 8,
				page: 0,
				type: 1, //更据tpye来判断当前页是总通讯页还是查询页 1:总通讯页 2：查询页
				name: '',
				message: '通讯录暂无校友，快去找校友吧'
			}
		},		
		computed:{
		   ...mapState(['userId', 'token', 'userName', 'wxNickName'])
		},
		onLoad() {
			let that = this;
			uni.request({
					url: getApp().globalData.URL + 'gzmuAnnUserContacts/getContacts',
					data: {
						myId: that.userId,
						page: that.page,
						size: that.size
					},
					method: 'GET'
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res] = data;
					this.address = res.data;
					console.log(this.address);
				})
		},
		onReachBottom: function() { //当划到最底部的时候触发事件
			console.log("我是最底部了");
			if (this.type === 1) {
				this.getMoreNews(); //到底之后会触发getMoreNews()函数;
			} else {
				this.getMoreNewsByName();
			}
		},
		methods: {
			errorImg(index) {
				this.address[index].head_img_url = '../../static/images/define.png'; //默认图片  
			},
			getHeadUrl(path) {
				// var ImgObj = new Image();
				// ImgObj.src= path;
				// if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)){
				// 	return '../../static/images/默认头像.png'
				// }
				if (path == "../../static/images/define.png") {
					return '../../static/images/define.png';
				} else {
					return getApp().globalData.Link + 'file/' + path;
				}

			},
			goToSearch() {
				if (this.name === '') {
					this.type = 1;
					this.page = 0;
					uni.request({
							url: getApp().globalData.URL + 'gzmuAnnUserContacts/contacts?myId=' + this.id + "&page=" + this.page + "&size=" +
								this.size,
							method: 'GET'
						})
						.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
							var [error, res] = data;
							console.log("成功连接!!查询1");
							this.address = res.data;
							console.log(this.address);

						});
				} else {
					this.type = 2;
					this.page = 0;
					uni.request({
							url: getApp().globalData.URL + 'gzmuAnnUserContacts/query?myId=' + this.id + "&page=" + this.page + "&size=" +
								this.size + '&name=' + this.name,
							method: 'GET'
						})
						.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
							var [error, res] = data;
							console.log("成功连接!!查询2");
							this.address = res.data;
							console.log(this.address);
						});
				}
				console.log(this.type)

			},
			getMoreNews: function() { //数据到底,触发这个函数
				this.page = this.page + 1
				uni.showNavigationBarLoading(); //一读取数据,就进行刷新
				uni.request({
						url: getApp().globalData.URL + 'gzmuAnnUserContacts/contacts?myId=' + this.id + "&page=" + this.page + "&size=" +
							this.size,
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						console.log(this.page);
						if (res.data == 0) {
							this.page = this.page - 1
							uni.stopPullDownRefresh(); //数据加载完成,刷新结束
							uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
							return false;
						}
						this.address = this.address.concat(res.data)
						console.log(this.address);
						uni.stopPullDownRefresh(); //数据加载完成,刷新结束
						uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止

					});
			},
			getMoreNewsByName: function() {
				this.page = this.page + 1
				uni.showNavigationBarLoading(); //一读取数据,就进行刷新
				uni.request({
						url: getApp().globalData.URL + 'gzmuAnnUserContacts/query?myId=' + this.id + "&page=" + this.page + "&size=" +
							this.size + '&name=' + this.name,
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						console.log(this.page);
						if (res.data == 0) {
							this.page = this.page - 1
							uni.stopPullDownRefresh(); //数据加载完成,刷新结束
							uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
							return false;
						}
						this.address = this.address.concat(res.data)
						console.log(this.address);
						uni.stopPullDownRefresh(); //数据加载完成,刷新结束
						uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
					});
			}
		}
	}
</script>

<style>
	.nothing {
		text-align: center;
	}

	.header-input {
		margin-left: 28rpx;
		margin-top: 20rpx;
		width: 694rpx;
		height: 66rpx;
		border-radius: 36rpx;
		background-color: rgba(245, 245, 245, 0.9);
		border: 1rpx solid #dfdfdf;
		display: flex;
		flex-direction: row;
	}

	.header-input input {
		margin-left: 31rpx;
		width: 564rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-right: 1rpx solid #dfdfdf;
		font-size: 28rpx;
	}

	.header-input view {
		width: 96rpx;
		height: 66rpx;
	}

	.search-image {
		margin-left: 20rpx;
		margin-top: 11rpx;
		width: 44rpx;
		height: 44rpx;
	}

	.tit {
		color: #007AFF;
		margin: 15rpx 15rpx;
		height: 80rpx;
		border-bottom: 1px solid #999999;
	}

	.img {
		margin: 10rpx 15rpx;
	}

	.tr {
		background-color: #FFFFFF;
		height: 130rpx;
		border-bottom: 2rpx solid #dfdfdf;
		margin: 15rpx 15rpx;
	}

	.name {
		font-size: 45rpx;
		/* margin: 20rpx; */
		margin-left: 130rpx;
		margin-top: -120rpx;
	}

	.imga {
		margin-left: 600rpx;
		margin-top: -40rpx;
	}

	.name1 {
		margin-top: -30rpx;
		font-size: 26rpx;
		color: #808080;
		margin-left: 130rpx;
	}
</style>
